<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<meta name="robots" content="noindex">
<title>7款HTML5 Canvas全屏背景动画特效01</title>
<style>
canvas { position: absolute; top: 0; left: 0; }

/* Demo Buttons Style */
.codrops-demos {
	font-size: 0.8em;
	text-align:center;
	position:absolute;
	z-index:99;
	width:96%;
}

.codrops-demos a {
	display: inline-block;
	margin: 0.35em 0.1em;
	padding: 0.5em 1.2em;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2px;
	font-size: 110%;
	border: 2px solid transparent;
	color:#fff;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
	border-color: #383a3c;
}
</style>
</head>

<body>

<nav class="codrops-demos">
	<a class="current-demo" href="index.html">Demo 1</a>
	<a href="index2.html">Demo 2</a>
	<a href="index3.html">Demo 3</a>
	<a href="index4.html">Demo 4</a>
	<a href="index5.html">Demo 5</a>
	<a href="index6.html">Demo 6</a>
	<a href="index7.html">Demo 7</a>
</nav>

<canvas id="c"></canvas>

<script type="text/javascript">
    var w = c.width = window.innerWidth,
      h = c.height = window.innerHeight,
      ctx = c.getContext('2d'),
      tick = 0,
      lines = [],
      baseRad = Math.PI * 2 / 6,

      opts = {
          len: 20,
          count: 100,
          baseTime: 10,
          addedTime: 40,
          dieChance: .05,
          spawnChance: 1,
          sparkChance: .1,
          sparkDist: 10,
          sparkSize: 2,
          color: 'hsl(hue,100%,light%)',
          baseLight: 50,
          addedLight: 10,
          shadowToTimePropMult: 6,
          baseLightInputMultiplier: .01,
          addedLightInputMultiplier: .02,
          cx: w / 2,
          cy: h / 2,
          repaintAlpha: .04,
          hueChange: .1
      },
      dieX = w / 2 / opts.len,
      dieY = h / 2 / opts.len;

    console.log(dieX);
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

    function Line() {
        this.reset()
    }

    Line.prototype.reset = function(){
        this.x = 0;
        this.y = 0;
        this.addedX = 0;
        this.addedY = 0;
        this.rad = 0;
        this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
        this.color = opts.color.replace('hue',tick * opts.hueChange);
        this.cumulativeTime = 0;
        this.beginPhase();
    }

    Line.prototype.beginPhase = function(){
        this.x += this.addedX;
        this.y += this.addedY;
        this.time = 0;
        this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;
        this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
        this.addedX = Math.cos(this.rad);
        this.addedY = Math.sin(this.rad);

        if(Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) {
            this.reset();
        }
    }

    Line.prototype.step = function(){
        this.time ++;
        this.cumulativeTime ++;
        if(this.time >= this.targetTime){
            this.beginPhase();
        }


        var prop = this.time / this.targetTime,
          wave = Math.sin(prop * Math.PI / 2),
          x = this.addedX * wave,
          y = this.addedY * wave,
          sx = opts.cx + (this.x + x) * opts.len,
          sy = opts.cy + (this.y + y) * opts.len;

        ctx.shadowBlur = prop * opts.shadowToTimePropMult;
        ctx.fillStyle = ctx.shadowColor = this.color.replace('light',opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
        ctx.fillRect(sx,sy,2,2);

        if(Math.random() < opts.sparkChance){
            var ssx = sx + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2,
              ssy = sy + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2;

            ctx.fillRect(ssx,ssy,opts.sparkSize,opts.sparkSize);
        }

    }

    function loop() {
        window.requestAnimationFrame(loop);
        tick ++;
        ctx.globalCompositeOperation = 'source-over';
        ctx.shadowBlur = 0;
        ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'lighter';
        if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
        lines.map(function(line) {
            line.step()
        })
    }


    window.addEventListener('resize', function() {

        w = c.width = window.innerWidth;
        h = c.height = window.innerHeight;
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, w, h);
        opts.cx = w / 2;
        opts.cy = h / 2;
        dieX = w / 2 / opts.len;
        dieY = h / 2 / opts.len
    });

    loop();
</script>

</body>
</html>
